<!--<template>-->
<!--    <div ref="containerRef" class="container">-->
<!--      <img v-for="(imageSrc, index) in imageSources" :key="index" :src="imageSrc" />-->
<!--    </div>-->
<!--  </template>-->
<!--  -->
<!--  <script lang="ts">-->
<!--  import { onMounted, onBeforeUnmount, onBeforeUpdate, onUpdated, ref } from 'vue';-->
<!--  -->
<!--  export default {-->
<!--    name: 'MasonryGallery',-->
<!--    setup() {-->
<!--      const containerRef = ref<HTMLElement | null>(null);-->
<!--      const imgWidth = 220;-->
<!--      const imageCount = 15; // 四组共60张图片-->
<!--      const imageSources = new Array(imageCount).fill('').map((_, index) => `src/assets/${index + 1}.jpg`);-->
<!--      function cal(): { space: number; columns: number } {-->
<!--        const containerWidth = containerRef.value?.clientWidth || 0;-->
<!--        const columns = Math.floor(containerWidth / imgWidth);-->
<!--        const spaceNumber = columns + 1;-->
<!--        const leftSpace = containerWidth - columns * imgWidth;-->
<!--        const space = leftSpace / spaceNumber;-->
<!--        return { space, columns };-->
<!--      }-->
<!--  -->
<!--      function setPositions() {-->
<!--        if (!containerRef.value) return;-->
<!--  -->
<!--        const info = cal();-->
<!--        const nextTops = new Array(info.columns).fill(0);-->
<!--        const children = Array.from(containerRef.value.children);-->
<!--  -->
<!--        children.forEach((img, i) => {-->
<!--          const minTop = Math.min(...nextTops);-->
<!--          (img as HTMLImageElement).style.top = `${minTop}px`;-->
<!--          const index = nextTops.findIndex(top => top === minTop);-->
<!--          nextTops[index] += (img as HTMLImageElement).height + info.space;-->
<!--          const left = (index + 1) * info.space + index * imgWidth;-->
<!--          (img as HTMLImageElement).style.left = `${left}px`;-->
<!--        });-->
<!--  -->
<!--        const max = Math.max(...nextTops);-->
<!--        containerRef.value.style.height = `${max}px`;-->
<!--      }-->
<!--  -->
<!--      function handleResize() {-->
<!--        clearTimeout(window.resizeTimer);-->
<!--        window.resizeTimer = setTimeout(setPositions, 100);-->
<!--      }-->
<!--  -->
<!--      onMounted(() => {-->
<!--        setPositions();-->
<!--        window.addEventListener('resize', handleResize);-->
<!--      });-->
<!--  -->
<!--      onBeforeUpdate(() => {-->
<!--        clearTimeout(window.resizeTimer);-->
<!--      });-->
<!--  -->
<!--      onUpdated(() => {-->
<!--        setPositions();-->
<!--      });-->
<!--  -->
<!--      onBeforeUnmount(() => {-->
<!--        window.removeEventListener('resize', handleResize);-->
<!--      });-->
<!--  -->
<!--      return {-->
<!--        containerRef,-->
<!--        imgWidth,-->
<!--        imageSources,-->
<!--      };-->
<!--    },-->
<!--  };-->
<!--  </script>-->
<!--  -->
<!--  <style scoped>-->
<!--  .container {-->
<!--    position: relative;-->
<!--  }-->
<!--  </style>-->
